<template>
  <d2-container>
    <template slot="header">Page 2 header</template>
    <div class="toolbar" v-if="display">
      <div class="input-wrap">
        <div class="toolbar-wrap">
          <slot name="menutitle">班级：</slot>
          <el-select v-model="organization" clearable>
            <el-option
              v-for="item in organizationList"
              :key="item.organization_id"
              :label="item.orgname"
              :value="item.organization_id"
            ></el-option>
          </el-select>
        </div>

        <div class="toolbar-input">
          <el-input
            placeholder="姓名"
            v-model="studentName"
            clearable
          ></el-input>
        </div>

        <div class="toolbar-input">
          <el-input placeholder="学号" v-model="studentId" clearable></el-input>
        </div>

        <el-button type="primary" icon="el-icon-search" @click="SearchResume"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="careerplancomments-table">
      <el-table
        :data="resumeList"
        border
        size="mini"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="file_name"
          label="文件名"
          show-overflow-tooltip=""
        >
          <template slot-scope="scope">
            <div class="resume-title" @click="preview(scope.row)">
              <el-badge :is-dot="dot(scope.row)" class="item">{{
                scope.row.file_name
              }}</el-badge>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="user_id.username"
          label="姓名"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="user_id.studentid"
          label="学号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="user_id.userinfo.organization.orgname"
          label="班级"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="create_time"
          label="上传时间"
          width="130"
        ></el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.status === 1">待审核</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status === 0"
              >退回</el-tag
            >
            <el-tag type="success" v-else>通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="125">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-view"
              type="warning"
              circle
              @click="preview(scope.row)"
            >
            </el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-download"
              circle
              @click="download(scope.row)"
            >
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              :disabled="disabled"
              @click="under(scope.row)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <div class="pagination" v-show="totalcount > 10">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pagesize"
        @current-change="pageChange"
        :current-page.sync="currentPage"
        :total="totalcount"
      ></el-pagination>
    </div>
  </d2-container>
</template>

<script>
import {
  getOrganization, getResumeList
} from '@/api/api'
import util from '@/libs/util.js'
import { dbGet } from '@/libs/util.db'
export default {
  name: 'resumemanage',
  data () {
    return {
      totalcount: 0,
      pagesize: 10,
      currentPage: 1,
      resumeList: [],
      organizationList: [],
      organization: '',
      studentName: '',
      studentId: '',
      disabled: true,
      display: false,
      roleid: '',
      userid: ''
    }
  },
  created () {
    this.roleid = dbGet({
      dbName: 'roleid',
      path: 'roleid'
    })
    this.userid = util.cookies.get('user_id')
    this.display = this.roleid > 2
    this.disabled = this.roleid === 3
    this.getList()
    this.getOrganization()
  },
  methods: {
    getList () {
      const params = this.getParams()
      params.pagenow = this.pagenow
      params.user_id = this.roleid > 2 ? '' : this.userid
      getResumeList(params).then(res => {
        if (res.code === 401) {
          this.$toast(res.message, 'error')
        }
        this.resumeList = res.data.data
        this.totalcount = res.data.totalcount
      })
    },

    // 搜索简历
    SearchResume () {
      this.currentPage = 1
      const params = this.getParams()
      getResumeList(params).then(res => {
        this.resumeList = res.data.data
        this.totalcount = res.data.totalcount
      })
    },

    // 检测分页点击
    pageChange (currentPage) {
      this.pagenow = currentPage
      this.currentPage = currentPage
      this.getList()
    },

    // 获取班级列表
    getOrganization () {
      getOrganization()
        .then(res => {
          this.organizationList = res.data
        })
    },

    // 获取搜索条件
    getParams () {
      const params = {}
      params.studentName = this.studentName
      params.studentId = this.studentId
      params.organization = this.organization
      return params
    },
    // 显示红点
    dot (resume) {
      const isdot = resume.is_dot
      return !isdot
    },
    // 跳转到详情页
    preview (resume) {
      this.$router.push({
        path: '',
        query: {
          resume_id: resume.resume_id
        }
      })
    },
    download () {},
    under () {},
    showDialog (tip, next) {
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          next()
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss">
.toolbar {
  padding: 20px;
  display: flex;
  flex-direction: row;

  .input-wrap {
    display: flex;
    height: 42px;
    width: 100%;
    line-height: 42px;
    justify-content: space-evenly;

    .toolbar-input {
      margin-top: -1px;
    }
  }
}
.careerplancomments-table {
  margin-top: 10px;
  .resume-title {
    cursor: pointer;
    padding-top: 2px;
    &:hover {
      color: #29b6f6;
    }
  }
}

.pagination {
  margin: 20px;
  text-align: center;
}
.el-pagination {
  justify-content: center;
}

// div 元素匀速向下移动
@keyframes show {
  from {
    margin-top: -10px;
    opacity: 0;
  }
  to {
    margin-top: 0px;
    opacity: 1;
  }
}
</style>
